{% extends 'base.html' %}
{% load static %}

{% block title %}重置密码 - 自动化测试平台{% endblock %}

{% block extra_css %}
<style>
    .form-container {
        max-width: 500px;
        margin: 0 auto;
        background: var(--card-bg);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: 2rem;
    }
    
    .form-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .form-description {
        color: var(--text-secondary);
        margin-bottom: 1.5rem;
        line-height: 1.6;
        text-align: center;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        display: block;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background-color: var(--card-bg);
        color: var(--text-primary);
        font-size: 1rem;
        transition: border-color var(--transition-fast);
        box-sizing: border-box;
    }
    
    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    }
    
    .help-text {
        display: block;
        color: var(--text-tertiary);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .button-group {
        margin-top: 2rem;
    }
    
    .btn-primary {
        background-color: var(--primary);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: background-color var(--transition-fast);
        width: 100%;
    }
    
    .btn-primary:hover {
        background-color: var(--primary-hover);
    }
    
    .btn-secondary {
        background-color: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border);
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition-fast);
        margin-top: 1rem;
        width: 100%;
        text-decoration: none;
        display: block;
        text-align: center;
        box-sizing: border-box;
    }
    
    .btn-secondary:hover {
        background-color: var(--border-light);
        color: var(--text-primary);
    }
    
    .error-message {
        color: var(--danger);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .form-error {
        border-color: var(--danger);
    }
    
    .form-error:focus {
        border-color: var(--danger);
        box-shadow: 0 0 0 3px rgba(245, 34, 45, 0.1);
    }
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    <h2 class="form-title">重置密码</h2>
    
    <p class="form-description">
        请输入您的电子邮件地址，我们将向您发送重置密码的链接。
    </p>
    
    {% if form.errors %}
        <div class="bg-danger/10 border border-danger/20 text-danger p-3 rounded-lg mb-4">
            <strong>请求失败，请检查以下错误：</strong>
            <ul class="mt-2">
                {% for field, errors in form.errors.items %}
                    {% for error in errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    
    <form method="post">
        {% csrf_token %}
        
        <div class="form-group">
            <label for="id_email" class="form-label">电子邮件地址</label>
            <input 
                type="email" 
                id="id_email" 
                name="email" 
                class="form-control {% if form.email.errors %}form-error{% endif %}"
                placeholder="请输入您的邮箱地址"
                required
            >
            {% if form.email.errors %}
                <div class="error-message">
                    {% for error in form.email.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
            {% else %}
                <div class="help-text">请输入您注册时使用的邮箱地址</div>
            {% endif %}
        </div>
        
        <div class="button-group">
            <button type="submit" class="btn-primary">发送重置链接</button>
            <a href="{% url 'portal:home' %}" class="btn-secondary">返回首页</a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 表单验证增强
        const form = document.querySelector('form');
        const emailInput = document.getElementById('id_email');
        
        // 添加表单提交前验证
        form.addEventListener('submit', function(event) {
            let isValid = true;
            
            // 验证邮箱格式
            if (emailInput.value.trim() !== '') {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(emailInput.value)) {
                    isValid = false;
                    alert('请输入有效的邮箱地址');
                    emailInput.focus();
                }
            }
            
            if (!isValid) {
                event.preventDefault();
            }
        });
    });
</script>
{% endblock %}